<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Control Center</title>
    
    <link href="flat-ui.css" rel="stylesheet">
    <script src="echarts.js"></script>
    <script src="macarons.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body style="margin:0px; padding:0" >
    <div id="left_wrapper">
      <div id="button_list">
        <button class="list_button btn btn-hg btn-primary" onclick="show_dashboard()">
            Dashboard
        </button>
            
        <button class="list_button btn btn-hg btn-primary" onclick="show_source()"> 
            Source 
        </button>
            
        <button class="list_button btn btn-hg btn-primary" onclick="show_strategy()">
            Strategy
        </button>
      </div>
    </div>
    <div id="right_wrapper" >
      <div id = "dashboard_view">
        <div id="current_status_wrapper">
            <div id = "gauge">
              <div id = "align" style="display:flex; align-items:baseline">
                <span id = "current_speed" style="font-size:40px">15</span>
                <span id = "current_speed_unit"style="font-size:15px">Mbps/s</span>
              </div>
            </div>
            <div id = "info">
              
            </div>
        </div>
        <div id="chart_wrapper">
            <div id="option">
                <button class="mb">年</button>
                <button class="mb">月</button>
                <button class="mb">日</button>
                <button class="mb">时</button>
                <button class="mb">分</button>
                <button class="mb">秒</button>
              </div>
            <div id="chart" style="height:80%; width:100%;" ondblclick='chart_switch'>
          </div>
        </div>
      </div>
      <div id="source_view">
          <div id="source_nav">
              <input id = "source_search" type="text" placeholder="search">
              <button class="cb">搜索</button>>
              <button class="mb_b" >表格</button>
              <button class="mb_b" >饼图</button>
          </div>
          <div id="pie_chart_wrapper" class = "wrapper">
            <div id="pie_chart" style="height:100%;width:100%">
            </div>
          </div>
          <div id="list_wrapper">
            <div id="table_wrapper">
            <table border="0" cellspacing="0" cellpadding="0">
              <thead>
              <tr>
                <th>Source</th>
                <th>Type</th>
                <th>Speed</th>
                <th>strategy</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                  <td>210.42.121.241</td>
                  <td>TCP</td>
                  <td>5Mbps/s</td>
                  <td>discard</td>
              </tr>
              <tr>
                  <td>210.42.121.241</td>
                  <td>TCP</td>
                  <td>5Mbps/s</td>
                  <td>discard</td>
              </tr>
              <tr>
                  <td>210.42.121.241</td>
                  <td>TCP</td>
                  <td>5Mbps/s</td>
                  <td>discard</td>
              </tr>
              <tr>
                  <td>210.42.121.241</td>
                  <td>TCP</td>
                  <td>5Mbps/s</td>
                  <td>discard</td>
              </tr>
              <tr>
                  <td>210.42.121.241</td>
                  <td>TCP</td>
                  <td>5Mbps/s</td>
                  <td>discard</td>
              </tr>
              </tbody>
            </table>
            </div>
            <div id="pagination">
              <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
              </ul>
            </div>
          </div>
        </div>
      <div id="strategy_view">
      </div>
    </div>
    
  </body>
  <script src="index.js"></script>
</html>
